<template>
  <div>
    <h3>黄勇破烂摊子</h3>
    <!-- 
      父传子语法：S
        1. 父组件通过给子组件，添加标签属性传值
        2. 子组件内部，通过 props 接收

      子传父语法：
        1. 子组件中 this.$emit('自定义事件名', 参数)
        2. 父组件中 注册对应的事件监听，处理触发的事件
           <Son @自定义事件名="处理函数"></Son>
     -->

    <!-- 使用组件 -->
    <my-product
      v-for="item in list"
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :info="item.desc"
      :id="item.id"
      @barGain="faeherChange"
    >
    </my-product>
    <!--   <div class="product">
    <h3>标题：{{ message.proname }}</h3>
    <p>价格: {{message. proprice }} 元一根</p>
    <p>描述: {{message. info }}  <button @click="sayPrice">砍一刀 - {{ pid }}</button></p>
  </div> -->
  </div>
</template>

<script>
import MyProduct from './components/my-product.vue'
export default {
  //注册
  components: {
    MyProduct,
  },

  data() {
    return {
      list: [
        {
          id: 1,
          proname: '超级好吃棒棒糖',
          proprice: 188,
          low: 160,
          desc: '甜',
        },
        {
          id: 2,
          proname: '超级好吃的大鸡腿',
          proprice: 360,
          low: 320,
          desc: '香',
        },
        { id: 3, proname: '超级无敌冰激凌', proprice: 42, low: 30, desc: '冰' },
      ],
    }
  },

  methods: {
    faeherChange(id, num) {
      this.list.forEach((item) => {
        if (item.id === id) {
       item.proprice>item.low?
        item.proprice-=num:
        alert('破产了！裤衩子都赔光了~')
          
        }
      })
    },
  },
}
</script>

<style></style>
